<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>个人信息 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="/ssm/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/ssm/static/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/ssm/static/css/style.min.css" rel="stylesheet">
  <link href="/ssm/static/css/cropper.min.css" rel="stylesheet">
  <style type="text/css">
    #input_updateIcon{
      display: none;
    }
  </style>
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <div class="edit-avatar">
            <div style="height: 100px;">
              <img src="" alt="..." class="img-avatar" id="userImg">
            </div>
            <div class="avatar-divider"></div>
            <div class="edit-avatar-content">
              <button class="btn btn-default" id="btn_updateIcon">修改头像</button>
              <input type="file" id="input_updateIcon" onchange="show(this)"> <!---->
<!--              <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>-->
              <button type="button" class="btn btn-default" onclick="$('#imgTeset').cropper('setDragMode','move')">移动</button>
              <button type="button" class="btn btn-default" onclick="horizontal()">水平翻转</button>
              <button type="button" class="btn btn-default" onclick="vertical()">垂直翻转</button>
              <button type="button" class="btn btn-success" onclick="cut()">裁剪</button>
<!--              <div style="width: 300px;height: 300px;">&lt;!&ndash;必须通过父容器限定图像大小 &ndash;&gt;-->
<!--                <img id="imgTeset" src="">-->
<!--              </div>-->
            </div>
          </div>
          <hr>
          <form method="post" action="#!" class="site-form">
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" class="form-control" name="username" id="username"  disabled="disabled" />
            </div>
            <div class="form-group">
              <label for="realName">昵称</label>
              <input type="text" class="form-control" name="realName" id="realName" >
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址" value="3331653644@qq.com">
              <small id="emailHelp" class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
            </div>
            <div class="form-group">
              <label for="remark">简介</label>
              <textarea class="form-control" name="remark" id="remark" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary" id="btn_save_profile">保存</button>
          </form>
 
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="/ssm/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/ssm/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/ssm/static/js/main.min.js"></script>
<script src="/ssm/static/js/cropper.min.js"></script>
<script type="text/javascript">
  function show(e){
    let $file = $(e);
    let fileObj = $file[0];
    let windowURL = window.URL || window.webkitURL;
    let dataURL = null;
    if (!fileObj || !fileObj.files || !fileObj.files[0]){//没有选择图片
      return;
    }
    dataURL = windowURL.createObjectURL(fileObj.files[0]);
    $("#userImg").attr('src', dataURL);
    $('#userImg').cropper({
      aspectRatio: 1 / 1,//长款1比1的比例
      viewMode: 1
    });
    $("#userImg").cropper('replace', dataURL);
  }
  let currentHorizontal=1;
  let currentVertical=1;
  //水平翻转
  function horizontal(){
    currentHorizontal*=-1;
    $('#userImg').cropper('scaleX',currentHorizontal);
  }
  //垂直翻转
  function vertical(){
    currentVertical*=-1;
    $('#userImg').cropper('scaleY',currentVertical);
  }

  function cut(){
    let size={width:100,height:100};//要裁剪成的图像大小
    let cas = $('#userImg').cropper('getCroppedCanvas',size);
    if(cas == null){
      alert("请选择图片");
      return false;
    }else{
      let base64url = cas.toDataURL('image/jpeg');//转换成图片格式
      $.ajax({
        url : "/ssm/user/image",//上传地址
        dataType:'json',
        type: "post",
        data: {
          fileName : "temp",
          imgBase64 : base64url
        },
        success: function (data) {
          console.log(data)
          if(data.code===20000){
            window.location="${pageContext.request.contextPath}";
          }
        }
      });
    }
  }
    let token = sessionStorage.getItem("token");
    $.ajax({
      type: "GET",
      url: "/ssm/user/user-info",
      dataType: "json",
      header:{
        'Authorization':token
      },
      beforeSend : function(request) {
        request.setRequestHeader("Authorization",token );
      },
      success:(data)=>{
        if(data.code=="20000"){
          console.log(data);
          $("#username").val(data.data.username);
          $("#realName").val(data.data.realName);
        }
      }
    });
    $("#btn_updateIcon").click(()=>{
      // $("#input_updateIcon").trigger("click")
      $("#input_updateIcon").click()
    });

    // $("#input_updateIcon").change((e)=>{
    //   console.log(e)
    //   let file;
    //   let fileMsg = e.currentTarget.files[0]
    //   let fileName = fileMsg.name;
    //   let fileSize = fileMsg.size;
    //   let fileType = fileMsg.type;
    //
    //   let fileTypePrefix = fileType.replace("/",".").split(".")[0];
    //   let fileTypeSuffix = fileType.replace("/",".").split(".")[1];
    //
    //   if(fileTypePrefix!=='image'){
    //     //您上传的文件类型不是图片类型，请重新选择
    //   }else{
    //       let formData = new FormData();
    //       formData.append("file",$("#input_updateIcon")[0].files[0]);
    //       $.ajax({
    //         url:'/ssm/user/image',
    //         type: 'POST',
    //         cache:false,
    //         data:formData,
    //         processData:false,
    //         contentType:false,
    //         success:(data)=>{
    //           console.log(data)
    //           $(".img-avatar").attr("src",data.data.src);
    //         }
    //       })
    //   }
    //   console.log()
    // });

    $("#btn_save_profile").click(()=>{


    })

</script>
</body>
</html>